<script setup lang="ts">
import QuestionHead from '@/components/QuestionHead.vue';
import QuestionMain from '@/components/QuestionMain.vue';
import router from '@/router';
import { useQuestionStore } from '@/stores/question';
import type { Ref } from 'vue';
import { computed, ref } from 'vue';

const store = useQuestionStore()

const questionCount = ref(0)

const questionTotal = computed(() => store.total)
const thisQuestion = computed(() => store.questions[questionCount.value])
const description = computed(() => thisQuestion.value.description)
const options = computed(() => thisQuestion.value.options)
const answer = computed(() => {
  let allAnswer = thisQuestion.value.answer.values()
  return allAnswer.next().value
})
const choice = computed(() => {
  if(thisQuestion.value.choice.size == 0)
    return undefined
  else
    return thisQuestion.value.choice.values().next().value
})
const explaination = computed(() => thisQuestion.value.explaination)

const handleBack = () => {
  questionCount.value--
}

const handleNext = () => {
  if(questionCount.value + 1 != questionTotal.value) {
    questionCount.value++
  } else {
    router.push('/review')
  }
}

const handleChoiceUpdate = (newChoice: number) => {
  thisQuestion.value.choice.clear()
  thisQuestion.value.choice.add(newChoice)
}
</script>

<template>
  <QuestionHead
    :total="questionTotal"
    :current="questionCount"
    @back="handleBack"
    @next="handleNext"
  ></QuestionHead>
  <el-divider />
  <QuestionMain
    :descrption="description"
    :options="options"
    :answer="answer"
    :choice="choice"
    :explaination="explaination"
    @update:choice="handleChoiceUpdate"></QuestionMain>
</template>